<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>

    <script src="../js/vue.js">

    </script>
</head>
<body>

<div id="root">
    <!--    使用v-show进行条件渲染-->
    <h2 v-show="true">
        n的值为:{{n}}
    </h2>
    <br/>
    <button @click="n++">
        点击加1
    </button>
    <!--    使用v-if进行条件渲染-->
    <div v-if="n>=1&&n<10">
        n的值小于10
    </div>
    <div v-else-if="n>=10&&n<20">
        n的值大于10小于20
    </div>
    <div v-else>
        n的值大于20
    </div>

    <!--    使用template标签不会破环结构-->
    <!--    template标签可以和v-if配合使用 不可以和v-show标签配合使用-->
    <template v-if="n>=2">
        <div>
            你好
        </div>
        <div>
            世界
        </div>
        <div>
            ！
        </div>
    </template>
</div>

<script type="text/javascript">
    Vue.config.printWarnings = false;
    const vm = new Vue({
        el: '#root',
        data: {
            n: 1,
        },
        methods: {}
    });

</script>
</body>

</html>